<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>优惠购-管理员</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
    html, body{
        margin:0;
        padding:0;
        height: 100%;
    }
    #error-info {
        position: fixed;
        right: 50px;
        top: 120px;
        width: 200px;
        padding: 10px;
        border: 1px solid #eeeeee;
        border-radius: 8px;
        box-shadow: 1px 1px 1px rgba(0,0,0,.1);
        background: #FFFFFF;
        transform: translate3d(150%, 0, 0);
        transition: transform .3s;
    }

    .error-title {
        padding: 0;
        margin:0;
        padding: 4px;
        color: red;
    }
</style>
</head>
<body>

<ul class="nav nav-tabs" id="head">
    <li role="imports" class="active" id="imports"><a href="#">商品上传</a></li>
    <li role="goods" id="goods"><a href="#" >商品管理</a></li>
    <li role="reply" id="reply"><a href="#" >处理反馈</a></li>
    <li role="config" id="config"><a href="#" >参数配置</a></li>
    <li role="bar" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            <span th:text="${session.adminName}"></span><span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li role="admin"><a th:href="@{/admin/logout}" style="text-align: center"> 注销登录 </a></li>
        </ul>
    </li>
    <li role="bar">
        <button type="button" class="btn btn-success">
            今天导入 <span id="gettodayimportcount"></span>
        </button>
        <button type="button" class="btn btn-danger">
            今天删除 <span id="getdelcount"></span>
        </button>
        <button type="button" class="btn btn-primary">
            数据库总量 <span id="getgoodscount"></span>
        </button>
    </li>

</ul>

<div id="error-info">
    <p class="error-title"><b>错误</b></p>
    <span>1510752061208 文件导入有错误，请重新配置后导入</span>
</div>


<iframe th:src="@{/admin/imports}" id="main-iframe" style="width: 100%;" scrolling="no" frameborder="0"></iframe>
<script th:inline="javascript">
    var liItem = $('#head li');
    var lastIndex = 0;
    $('#head li').on('click', function () {
        var index = $(this).index();
        if (index !== lastIndex) {
            $(liItem[index]).addClass('active');
            var role = $(liItem[index]).attr('role');
            $(liItem[lastIndex]).removeClass('active');
            lastIndex = index
            if (role == 'bar')
                return;
            $("#main-iframe").attr('src','/admin/'+role + '.html')
        }
    });

    var urls = ['gettodayimportcount', 'getgoodscount', 'getdelcount']
    $.each(urls, function (i, item) {
        $.get('/admin/' + item, function (data) {
            $('#' + item).html(data)
        })
    })

// websocket
    var id = [[${session.admin}]]
    console.log("id"+id)
    var ws = new WebSocket("ws://wx.jjyouhuigo.com/websocket/"+id);
//    var ws = new WebSocket("ws://127.0.0.1/websocket/"+id);
    ws.onopen = function(){
        console.log("open");
    };

    ws.onmessage = function(evt){
        console.log(evt.data)
        $('#error-info span').html(evt.data)
        $('#error-info').css('transform', 'translate3d(0, 0, 0)')
        setTimeout(function () {
            $('#error-info').css('transform', 'translate3d(150%, 0, 0)')
        }, 6000)
    };

    ws.onclose = function(evt) {
        console.log("close");
    };

    ws.onerror = function(evt){
        console.log("error");
    };
</script>
</body>
</html>